<template>
  <div class="item">
   
     <input type="checkbox" v-model="todo.isComplate">
   
   <span class="content" :class="{del:todo.isComplate}">{{todo.content}}</span>
   <span class="iconfont icon-shanchu" @click="delTodo(todo.id)"></span>
  </div>
</template>

<script>
export default {
  methods: {
   delTodo(id){
     this.$emit('delTodo',id)
     
   }
  },
  props:['todo']
}
</script>
<style lang="scss" scoped>
.item{
  display: flex;
  padding: 1vw;
  border-bottom: 1px dotted #ccc;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  input{
  margin-right: 10px;
  }
  .content{
    flex-grow: 1;
  }
}

.del{
  text-decoration: line-through;
  color: #ccc;
}
</style>